<div class="sky-container sky-container-grey">
  <app-header [headline]="'title.blockchain' | translate"></app-header>

  <app-loading-content *ngIf="!(block && block.header && coinSupply)"></app-loading-content>

  <div class="container" *ngIf="block && block.header && coinSupply">
    <div class="row -wrapper">
      <div class="col-md-6">
        <div class="-paper">
          <div class="-item">
            <div class="-key">{{ 'blockchain.blocks' | translate }}</div>
            <div class="-value">{{ block.header.seq | number }}</div>
          </div>
          <div class="-item">
            <div class="-key">{{ 'blockchain.time' | translate }}</div>
            <div class="-value">{{ block.header.timestamp | dateTime }}</div>
          </div>
          <div class="-item">
            <div class="-key">{{ 'blockchain.hash' | translate }}</div>
            <div class="-value">{{ block.header.block_hash }}</div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="-paper">
          <div class="row">
            <div class="col-md-6">
              <div class="-item">
                <div class="-key">{{ 'blockchain.current-supply' | translate }}</div>
                <div class="-value">{{ coinSupply.current_supply | amount:true:'first' }}</div>
              </div>
              <div class="-item">
                <div class="-key">{{ 'blockchain.total-supply' | translate }}</div>
                <div class="-value">{{ coinSupply.total_supply | amount:true:'first' }}</div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="-item">
                <div class="-key">{{ 'blockchain.current-coinhour-supply' | translate }}</div>
                <div class="-value">{{ coinSupply.current_coinhour_supply | amount:false:'first' }}</div>
              </div>
              <div class="-item">
                <div class="-key">{{ 'blockchain.total-coinhour-supply' | translate }}</div>
                <div class="-value">{{ coinSupply.total_coinhour_supply | amount:false:'first' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
